<template>
  <div class="alarmAmount-root">
    <formTitleVue
      title="空间分析信息"
      :selectOptions="selectOptions"
    />
    <myBar domId="spaceAnalysisCharts" :chartsData="chartsData" :myOption="myOption" @clickFuc="clickFuc"  />
  </div>
</template>

<script>
  import formTitleVue from "@/components/FormTitle/formTitle.vue";
  import { overviewSpaceAnalysis } from "@/api/risk/cityWaringResult";
  import myBar from '@/components/Echarts/myBar.vue';
    export default {
        name: "spaceAnalysis",
      components: {
        formTitleVue, myBar
      },
      props: {
        yearOptions:{},
        areaOptions:{
          type: Array,
          default:() => []
        }
      },
      data() {
        return {
          chartsData:{
            xData: [],
          },
          myOption:{
            xAxis: {
              // boundaryGap: false,
            },
          },
          selectOptions: [
            {
              key:"year",
              selectValue: "",
              options: [],
              changeFn: this.selectChange1,
            },
          ],
          searChForm: {
            year:"",
          },
        }
      },
      watch:{
        'yearOptions':{
          handler(newVal, oldVal) {
            this.selectOptions.forEach(t=> {
              if (t.key == 'year') {
                t.options = newVal
              }
            })
          },
          deep: true,
          immediate: true
        },
      },
      methods: {
        clickFuc(params){
          console.log('clickFuc===',params)
          this.$router.push({
                    // name: 'cityDetailDetail',
                    path:'/cstj/public/cityAnalysis/spaceAnalysis',
                    query: {
                        year: this.searChForm.year,
              },
        })
        },
        selectChange1(item){
          this.searChForm.year = item
          this.search()
        },
        search() {
          this.fetch({
            ...this.searChForm,
          })
        },
        fetch(params = {}) {
          overviewSpaceAnalysis(params).then(res => {
            if (res.code == 200) {
              console.log("overviewSpaceAnalysis=======",res.data)
              this.chartsData.xData = res.data.xAxle
              this.chartsData.yData = res.data.data
              console.log("this.chartsData===>",this.chartsData)
            } else {
              this.$message({
                message: this.$t('tips.systemException'),
                type: 'error'
              })
            }
          }).finally(final => {
          })
        },
        init(){
          this.selectOptions[0].selectValue = this.selectOptions[0].options[0].value
          this.searChForm.year = this.selectOptions[0].options[0].value
          this.search()
        },
      },
      mounted() {
        this.init()
      },
    }
</script>

<style scoped>

</style>
